<template>
    <div class="home">
        <!-- 顶部状态栏 -->
        <!-- <div class="top" v-if="option1.length">
            <van-dropdown-menu>
                <van-dropdown-item v-model="value" :options="option1" :onchange="goBoundCell()" />
            </van-dropdown-menu>
            <div class="weather">
                <img :src="require('../assets/img/img2/'+type+'_0.png')" alt="">
                <div class="wendu">{{wendu}}℃</div>
            </div>
        </div> -->
        <!-- <div class="top"  :title="title">
            <van-icon name="home-o" size="20px" />
            <span @click="goCommunityName()">{{communityName}}</span>
            <van-icon name="arrow" size="20px" />
        </div> -->
        <div class="top">
            <div class="weather">
                <img :src="require('../assets/img/img2/'+type+'_0.png')" alt="">
                <div class="wendu">{{wendu}}℃</div>
            </div>
            <van-icon name="home-o" size="20px" @click="goback()" />
            <div>{{communityName}}</div>
            <span v-show="isBangding" class="right" @click="goIdcard">立即认证</span>
        </div>
        <van-swipe :autoplay="3000">
            <van-swipe-item class="guanggao" v-for="(item,index) of imgList" :key="index">
                <img :src="item" alt="">
            </van-swipe-item>
        </van-swipe>
        <!-- 到家安全 -->
        <div class="menu">
            <!-- 一键求助 -->
            <div class="one" @click="goOneHelp">
                <div class="left">
                    <img src="../assets/img/img2/phone.png" alt="">
                </div>
                <div class="rigth">
                    <div class="shang">
                        一键求助
                    </div>
                    <div class="xia">
                        危机时刻,迅速求助
                    </div>
                </div>
            </div>

            <!-- 随手拍 -->
            <div class="one" @click="gocamera">
                <div class="left">
                    <img src="../assets/img/img2/camera.png" style="width: 36px;height: auto;" alt="">
                </div>
                <div class="rigth">
                    <div class="shang">
                        随手拍
                    </div>
                    <div class="xia">
                        想拍就拍,随手转发
                    </div>
                </div>
            </div>
            <!-- 生活缴费 -->
            <div class="one" @click="goProperty">
                <div class="left">
                    <img src="../assets/img/img2/v2_pxk40t.png" alt="">
                </div>
                <div class="rigth">
                    <div class="shang">
                        生活缴费
                    </div>
                    <div class="xia">
                        网上在线,生活缴费
                    </div>
                </div>
            </div>
            <!-- 使用说明 -->
            <div class="one" @click="goUsehelp()">
                <div class="left">
                    <img src="../assets/img/img2/v2_pxjzbq.png" alt="">
                </div>
                <div class="rigth">
                    <div class="shang">
                        使用说明
                    </div>
                    <div class="xia">
                        使用帮助,功能介绍
                    </div>
                </div>
            </div>
        </div>
        <!-- 安全贴士 -->
        <div class="save">
            <div class="img">
                <img src="../assets/img/img2/save.png" style="width: 36px;height: auto;" alt="">
            </div>
            <div class="text">
                <div class="shang">
                    安全贴士
                </div>
                <div class="xia">
                    安全防护小知识
                </div>
            </div>
        </div>

        <ul class="tips" v-if="tips">
            <li v-for="(item,index) in tips" :key="index">
                <div @click="godetails(index)">
                    <van-image class="border" width="2rem" height="2rem" fit="contain" :src="item.image" />
                    <h6>{{item.title}}</h6>
                    <p>{{item.content}}</p>
                </div>
            </li>
        </ul>

        <div class="baidumap" id="allmap">
        </div>

        <!-- 
                使用一个自定义组件
                1.使用属性的方式向子组件传递参数,如果属性的值是一个变量,就要在属性名前加v-bind或者冒号,属性名称有两种格式,驼峰或者短横线
                2.使用事件的方式接收子组件传上来的消息,事件监听函数的默认参数就是消息的内容
            -->
        <!-- <HelloWorld :msg="msg" :goodsMsg="msg1" :bad-msg="msg2" @fromSon="changeMsg" /> -->





    </div>
</template>

<script>
    document.addEventListener("plusready", function() { 
        // 注册返回按键事件 
        plus.key.addEventListener('backbutton', function() { 
            // 事件处理 
            window.history.back();
        }, false); 
    });
    import { DropdownMenu, DropdownItem } from 'vant';
    import { Toast } from "vant"
    import { mapMutations, mapState } from 'vuex'
    import { Swipe, SwipeItem, Icon } from 'vant'

    export default {
        // 当前组件的名称
        name: 'home',

        data() {
            return {
                communityName: "",
                imgList: [require('../assets/img/img2/v2_pz17fx.png'), require('../assets/img/img2/v2_pz17fq.png'), require('../assets/img/img2/v2_pz17fi.png')],
                option1: [],
                value: 12,
                equipment_name: "",
                title: "",
                text: "",
                comm_id: "",
                haveFace: "已录入人脸",
                wendu: 10,
                type: "00",
                tips: [
                    {
                        image: require('../assets/img/img2/v2_pz8mwu.jpg'),
                        title: '防盗小知识',
                        content: '门窗加固对预防盗窃很重要。要选择质量好、安全系数高的防盗门窗，避免“防盗门窗不防盗”的现象发生，给不法分子提供机会...'
                        // content:'啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊'
                    },
                    {
                        image: require('../assets/img/img2/v2_pz8n5y.png'),
                        title: '防火小知识',
                        content: '发现起火立即报警，这是每一个公民应尽的义务和应有的消防意识。首先就是要向首先，是向消防队报警：（1）要记牢火警电话是 “119” ；现在三台合一，拨打 110也可以报火警。'
                                    
                    },
                    {
                        image: require('../assets/img/img2/v2_pz8nbs.jpg'),
                        title: '物业小知识',
                        content: '物业公司何时开始收取物业管理费？答：一般可以分成两种情况和方式，一是，从购房人收房签字后，开始收取物业管理'
                    },
                    {
                        image: require('../assets/img/img2/v2_pz8n7q.png'),
                        title: '生活小知识',
                        content: '在我们的生活当中，也是利用很多的小妙招来做得更完美，看看你知道哪些。你知道怎样减缓有幸皮肤吗？你知道土豆还有很多'
                    }

                ],
                isBangding: false
            }
        },

        // 在当前组件中添加其他的自定义组件
        components: {

        },

        /*
            在computed中添加mapState
            如果computed中只有一个辅助函数，后面可以直接写成函数名
        */
        computed: {
            ...mapState(['token', 'userInfo', 'userid', "homeId"]), // this.token相当于this.$store.state.token

        },
        methods: {
            ...mapMutations(['changehomeId']),
            goUsehelp() {
                this.$router.push(
                    {
                        name: 'usehelp'
                    }
                )
            },
            // 获取定位信息
            getLocation() {
                let that = this
                var map = new BMap.Map("allmap");
                var point = new BMap.Point(116.331398, 39.897445);
                map.centerAndZoom(point, 12);

                function myFun(result) {
                    var cityName = result.name;
                    map.setCenter(cityName);
                    that.getwether(cityName)
                }
                var myCity = new BMap.LocalCity();
                myCity.get(myFun);
            },
            getwether(cityname) {
                this.$axios.get('/getweather', {
                    params: {
                        cityname: cityname
                    }
                }).then((res) => {
                    const { data, status } = res
                    console.log(res)
                    if (status == 200 && data.wendu != null) {
                        this.wendu = data.wendu
                        this.type = data.num
                    }
                })
            },
            goOneHelp() {
                this.$router.push("/oneHelp")
            },
            goIdcard(){
                this.$router.push({
                            name: 'IDcard'
                        })
            },
            godetails(index) {
                // console.log(index)
                this.$router.push({
                    name: "details",
                    params: {
                        sign: index + 1
                    }
                })
            },
            goBoundCell() {
                console.log(this.value)
                if (this.value == 999999) {
                    this.$router.push(
                        {
                            name: 'IDcard'
                        }
                    )
                } else {
                    this.changehomeId(this.value)
                }
            },
            goProperty() {
                // Toast("请打开云闪付支付!")
                // return
                this.$router.push(
                    {
                        name: 'property'
                    }
                )
            },
            getCommunityList() {
                let that = this
                this.$axios.get('/comm/getuserReviewStatus', {
                    params: {
                        user_id: this.userid
                    }
                }).then((res) => {
                    //console.log(res);
                    let { message, data, status } = res;
                    console.log(res)
                    if (status == 200) {
                        console.log("获取绑定状态")
                        if (data.comm_state == 2 || data.comm_state == 3) {
                            // Toast("请先绑定小区")
                            this.communityName = data.comm_name
                            that.isBangding = false
                        } else {
                            this.communityName = "未绑定"
                            this.isBangding = true
                        }
                    }
                })
            },
            goLiving() {
                // Toast("请打开云闪付支付!")
                // window.location.href = "anpingbao://map"
                // window.location.href="baibai://"
                // return
                this.$router.push(
                    {
                        name: 'a'
                    }
                )
            },
            gocamera() {
                this.$router.push('camera')
            },

            goPhoneKey() {
                Toast("开发中!")
                return
                this.$router.push(
                    {
                        name: 'phoneKey'
                    }
                )
            },
            goEnter() {
                if (this.option1.length == 0) {
                    Toast("请先绑定小区")
                    this.$router.push(
                        {
                            name: 'IDcard'
                        },
                    )
                } else {

                    let equipment_name = ""
                    for (var i = 0; i < this.option1.length; i++) {
                        if (this.value == this.option1[i].value) {
                            equipment_name = this.option1[i].equipment_name
                            const comm_id = this.option1[i].comm_id
                            console.log("comm_id", comm_id)
                            this.$router.push(
                                {
                                    name: 'enter',
                                    params: {
                                        isDuodu: equipment_name,
                                        comm_id: comm_id
                                    },
                                },
                            )
                        }

                    }
                }

            },
            goCommunityName() {
                this.$router.push(
                    {
                        name: 'IDcard'
                    }
                )
            }

        },
        // 生命周期函数,创建实例,可以获取this,但DOM节点还没有创建出来
        created() {
            this.getCommunityList()
        },
        // 生命周期函数,当前组件上的所有DOM节点都已经创建出来
        mounted() {
            this.getLocation()
        },
        // 生命周期函数,当数据发生改变并且导致视图发生相应的改变
        updated() {
            // console.log('updated')

        },
        // 生命周期函数,组件被销毁
        destroyed() {
            //console.log('destroyed')
        },
        // 生命周期函数,进入缓存组件
        activated() {
            //console.log('activated')

            // 再次回来的时候,直接滚动到之前离开时候保存的位置


            // 如果每次进入缓存组件的时候，需要实时更新当前组件中的内容，可以将这些更新代码写在activated

            // 请求获取用户信息
            // this.reqUserInfo()
            // this.$store.dispatch('changeUserInfo2')

        },
        // 生命周期函数,离开缓存组件
        deactivated() {
            //console.log('deactivated')

            // 不要尝试去获取页面的scrollTop,因为页面只有一个,跳转到新的路由,页面的scrollTop会变成0
            // 所以,在离开的时候,把当前组件的scrollTop保存下来,赋给一个新的变量
            // this.cache_scrollTop = this.scrollTop
        },
        // 离开路由之前,它会在deactivated之前调用
        beforeRouteLeave(to, from, next) {

            //console.log('beforeRouteLeave')

            // 1.获取页面的scrollTop,赋给一个新的变量
            // this.cache_scrollTop = document.documentElement.scrollTop || document.body.scrollTop

            // 2.获取顶部状态栏距离父元素底部的距离,赋给一个新的变量


            // 必须调用next,否则就不会离开当前路由
            next()
        }
    }
</script>

<!-- 添加scoped属性,将样式的作用域限制在当前组件内,不会影响子组件 -->
<style lang="scss" scoped>
    .home {
        padding: 40px 0 50px 0;
        /* height: 100vh; */
        overflow: hidden;
        /* overflow: hidden; */
    }

    .van-dropdown-menu {
        height: 40px !important;
    }

    h1 {
        color: green !important;
    }

    .top {
        /* margin: 6px 0; */
        width: 100%;
        height: 40px;
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        left: 0;
        top: 0;
        z-index: 999;
        background-color: #4b77e4;
        color: white;

        .right {
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            font-size: 20px;
            /* width: 20px;
        height: 20px; */
            right: 10px;
            /* font-size: .4rem; */
        }
    }

    .weather {

        position: absolute;
        left: 0;
        /* top:0;
        bottom: 0; */
        margin: 0 auto;

        img {
            float: left;
            height: 30px;
            width: auto;
            line-height: 40px;
            margin-top: 5px;
        }

        .wendu {
            line-height: 40px;
            float: left;
            margin-left: -5px;
        }
    }

    .guanggao {
        width: 100%;
        /* border-top: 1px solid #666; */
        /* padding-top: 2px; */
        height: 3.2rem;
    }

    .guanggao img {
        width: 100%;
        /* border-top: 1px solid #666; */
        /* padding-top: 2px; */
        height: 3.2rem;
    }

    .top span {
        margin: 0;
    }

    .menu {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 95%;
        margin: 0 auto;

        .one {
            border: 1px solid #999;
            border-radius: 10px;
            width: 48%;
            display: flex;
            justify-content: space-around;
            margin: .3rem auto 0;
            align-items: center;

            .left {
                img {
                    width: 40px;
                    height: auto;
                }
            }

        }
    }

    .shang {
        font-size: .32rem;
        font-weight: 900;
    }

    .save {
        margin-top: .4rem;
        overflow: hidden;

        .img {
            width: 40px;
            height: auto;
            float: left;
            margin: 0 .2rem;
        }

        .text {
            float: left;
        }
    }

    .tips {
        li {
            padding: 0rem 0.1rem 0rem 2.4rem;
            min-height: 2rem;
            position: relative;
            overflow: hidden;
            border-top: 1px solid #999;

            .van-image {
                display: block;
                position: absolute;
                left: 0.1rem;
                top: 50%;
                margin-top: -1rem;
                border-color: #bbb;
            }

            h6 {
                font-size: 0.4rem;
                color: #101010;
                padding: 0.2rem 0;
            }

            p {
                font-size: 15px;
                color: #101010;
                word-wrap: break-word;
                line-height: 15px;
                height: 45px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
            }
        }
    }

    .wendu {
        font-size: 16px;
    }
</style>